<template>
  <div class="main" :class="{'main-hide-text': hideMenuText}">
    <!-- 左侧菜单 -->
    <div class="sidebar-menu-con"
         :style="{width: hideMenuText?'60px':'200px', overflow: hideMenuText ? 'visible' : 'auto', background: '#495060'}">
      <div class="logo-con">
        <img v-show="!hideMenuText" src="../../../static/images/logo.jpg" key="max-logo"/>
        <img v-show="hideMenuText" src="../../../static/images/logo-min.jpg" key="min-logo"/>
      </div>
      <sidebar-menu  v-if="!hideMenuText" :menuList="leftMenuList" :iconSize="14"/>
      <sidebar-menu-shrink  :icon-color="'white'" v-else :menuList="leftMenuList"/>
    </div>

    <!-- 顶部导航 -->
    <div class="main-header-con" :style="{paddingLeft: hideMenuText?'60px':'200px'}">
      <div class="main-header">
        <div class="navicon-con">
          <Button :style="{transform: 'rotateZ(' + (this.hideMenuText ? '-90' : '0') + 'deg)'}" type="text"
                  @click="hideMenuText=!hideMenuText">
            <Icon type="md-menu" size="32"></Icon>
          </Button>
        </div>

        <!-- 顶部导航开始 -->
        <div class="header-middle-con" style="padding: 0">
          <top-menu/>
        </div>
        <!-- 顶部导航结束 -->

        <!-- 顶部右侧开始 -->
        <div class="header-avator-con">
          <div @click="$router.push({name: 'message_index'})" class="message-con" >
            <Tooltip :content="messageCount > 0 ? '有' + messageCount + '条未读消息' : '无未读消息'" placement="bottom">
              <Badge :count="messageCount" dot>
                <Icon type="ios-notifications" :size="22"></Icon>
              </Badge>
            </Tooltip>
          </div>
          <div @click="handleFullScreen" v-if="showFullScreenBtn" class="full-screen-btn-con" >
            <Tooltip :content="isFullScreen ? '退出全屏' : '全屏'" placement="bottom">
              <Icon :type="isFullScreen ? 'ios-contract' : 'ios-expand'" :size="23"></Icon>
            </Tooltip>
          </div>


          <div class="user-dropdown-menu-con">
            <Row type="flex" justify="end" align="middle" class="user-dropdown-innercon">
              <Dropdown transfer trigger="hover" >
                <a href="javascript:void(0)">
                  <span class="main-user-name">{{ userInfo.nick }}</span>
                  <Icon type="md-arrow-dropdown"></Icon>
                </a>
                <DropdownMenu slot="list">
                  <DropdownItem name="ownSpace" @click.native="$router.push({name: 'personInfo'})">个人中心</DropdownItem>
                  <DropdownItem name="loginout" divided @click.native="logout">退出登录</DropdownItem>
                </DropdownMenu>
              </Dropdown>
              <Avatar :src="userInfo.head" style="background: #619fe7;margin-left: 10px;"></Avatar>
            </Row>
          </div>
        </div>
        <!-- 顶部右侧结束 -->
      </div>
      <div class="tags-con">
        <tags-page-opened/>
      </div>
    </div>
    <!-- 页面路由 -->
    <div class="single-page-con" :style="{left: hideMenuText?'60px':'200px'}">
      <div class="single-page">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  import sidebarMenu from '../../components/main/sidebarMenu'
  import sidebarMenuShrink from '../../components/main/sidebarMenuShrink'
  import tagsPageOpened from '../../components/main/tagsPageOpened'
  import topMenu from '../../components/main/topMenu'
  import {CLEAR_LOGIN_DATA} from '../../store/param/mutation_type'

  export default {
    name: 'Main',
    data () {
      return {
        hideMenuText: false,
        messageCount: 5,
        lockScreenSize: 0,
        isFullScreen:false,
        showFullScreenBtn: window.navigator.userAgent.indexOf('MSIE') < 0,
      }
    }, components: {topMenu, sidebarMenu, sidebarMenuShrink, tagsPageOpened},
    computed: {
      ...mapState(['userInfo']),
      ...mapState(['leftMenuList']),
      ...mapState(['pageOpenedList'])
    },
    watch: {
    }, methods: {
      handleFullScreen(){
        let main = document.body
        if (this.isFullScreen) {
          if (document.exitFullscreen) {
            document.exitFullscreen()
          } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen()
          } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen()
          } else if (document.msExitFullscreen) {
            document.msExitFullscreen()
          }
        } else {
          if (main.requestFullscreen) {
            main.requestFullscreen()
          } else if (main.mozRequestFullScreen) {
            main.mozRequestFullScreen()
          } else if (main.webkitRequestFullScreen) {
            main.webkitRequestFullScreen()
          } else if (main.msRequestFullscreen) {
            main.msRequestFullscreen()
          }
        }
        this.isFullScreen=!this.isFullScreen
      },
      logout () {
        this.$Modal.confirm({
          title: '退出登录',
          content: '<p>您确定要退出登录吗？</p>',
          onOk: () => {
            this.$store.commit(CLEAR_LOGIN_DATA)
            this.$router.push({name: 'login'})
          },
          onCancel: () => {
          }
        })
      }
    }, mounted () {


    }
  }
</script>

<style scoped lang="less">
  @import "./main";

  .demo-spin-icon-load {
    animation: ani-demo-spin 1s linear infinite;
  }

  @keyframes ani-demo-spin {
    from {
      transform: rotate(0deg);
    }
    50% {
      transform: rotate(180deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  .demo-spin-col {
    height: 100px;
    position: relative;
    border: 1px solid #eee;
  }

</style>
